<template>
    <el-menu
      collapse-transition
      @open=""
      @close=""
      :default-openeds="['rule','site','type','tools']"
      :default-active="activeIndex"
      style="height: 850px;"
    >
        <el-submenu v-for="(item, index) in itemTabs" :key="item.key" :index="item.key">
            <template slot="title">
                <c-icon v-if="item.icon" :name="item.icon"></c-icon>&nbsp;{{item.name}}
            </template>
            <el-menu-item v-for="(subItem, subindex) in item.subItems" :key="subItem.key" :index="subItem.key">
                <router-link tag="div" :to="`/${subItem.key}`" replace>
                    <c-icon v-if="subItem.icon" :name="subItem.icon"></c-icon>&nbsp;{{subItem.name}}
                </router-link>
            </el-menu-item>
        </el-submenu>

    </el-menu>

</template>

<script>
import icon from 'vue-awesome';
export default {
    data(){
        return {
            activeIndex : 'ruleList',
            itemTabs: [
                        {key: 'rule', icon: 'sitemap', name: '规则管理', 
                        subItems : [
                            {key: 'ruleList', icon: 'list', name: '规则列表'},
                            {key: 'ruleConf', icon: 'edit', name: '规则配置'},
                            {key: 'storageModelList', icon:'list', name: '模型列表'},
                            {key: 'storageModelConf', icon:'edit', name: '模型配置'}
                        ]}, 
                        {key: 'site', icon: 'globe', name: '站点管理', 
                        subItems : [
                            {key: 'dataSourceList', icon: 'list', name: '数据源列表'},
                            {key: 'dataSourceConf', icon: 'edit', name: '数据源配置'},
                            {key: 'grabSourceList', icon: 'list', name: '抓取站点列表'},
                            {key: 'grabSourceConf', icon: 'edit', name: '抓取站点配置'}
                        ]},
                        {key: 'type', icon: 'tags', name: '分类管理', 
                        subItems : [
                            {key: 'categoryList', icon: 'list', name: '分类列表及配置'},
                            {key: 'infoTypeList', icon: 'list', name: '资讯类型列表及配置'},
                            {key: 'businessDetailsList', icon: 'list', name: '业务详情列表及配置'},
                        ]},
                        {key: 'tools', icon: 'wrench', name: '工具', 
                        subItems : [
                            {key: 'monitorConfList', icon: 'eye', name: '爬虫数据监控配置'},
                            {key: 'queueQuery', icon: 'object-group', name: '队列长度查询'},
                            {key: 'crawlTest', icon: 'hand-point-right', name: '爬虫测试'},
                        ]}
                      ]
        }
    },
    components: { 
        'c-icon' : icon
    },
    created(){
        if(this.$route.path === '/'){
            this.$router.push('/ruleList')
        }
        this.selectMenu();
    },
    mounted(){
        
    },
    watch: {
        '$route' (to, from) {
            //console.log('from---',from)
            //console.log('to---',to);
            this.selectMenu();
        }
    },
    methods: {
        //跳转页面时，选中相应的菜单项
        selectMenu(){
            const path = this.$route.path;
            this.itemTabs.forEach(item=>{
                let subItems = item.subItems;
                subItems.forEach(subItem=>{
                    let key = subItem.key;
                    if(path.indexOf(key) > -1){
                        this.activeIndex = key;
                    }
                })
            })
        }
    }
};
</script>
